@()(implicit request: RequestHeader,messages: Messages)
@main(messages("editProfileInformation"))("userProfile", "updatePersonInfo") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">

	<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>

	<style>
			.genome-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				border: 0px solid #ccc;
				background-color: white;
			}

			select:not([multiple]) {
				-webkit-appearance: none;
				-moz-appearance: none;
				background-position: right 50%;
				background-repeat: no-repeat;
				background-image: url();
				padding: .5em;
				padding-right: 1.5em
			}

			.fr {
				float: right;
			}

			.base-info .item .title span {
				display: inline-block;
				border-left: 2px solid #0b8af4;
				font-size: 14px;
				color: #333;
				padding-left: 10px;
			}

			.photo span {
				display: block;
				width: 92px;
				height: 92px;
			}

			.photo img {
				width: 100%;
				height: 100%;
			}

	</style>
	<div class="page-content">

		<div class="row">
			<div class="col-md-12">
				<div class="portlet light profile-sidebar-portlet ">

					<div class="portlet-title">
						<div class="item">
							<div class="title clear">
								<span>@messages("editProfileInformation")</span>
							</div>
						</div>
						<div class="caption">
						</div>
					</div>

					<div class="portlet-body">
						<div class="tab-content">
							<div class="tab-pane active" id="tab_1_1">
								<form role="form" action="@routes.UserController.updatePersonInfo" id="form">

									<span class="@request.flash.get("class")" style="line-height: 35px;" id="error">
									@if(request.flash.get("info").isDefined) {
										@Html(request.flash.get("info").get)
									}
									</span>

									<div class="form-group">
										<label class="control-label">User name</label>
										<input type="text" name="fullName" class="form-control fillByName"> </div>
									<div class="form-group">
										<label class="control-label">E-mail</label>
										<input type="text" name="email" class="form-control fillByName" readonly> </div>
									<div class="form-group">
										<label class="control-label">Institution</label>
										<input type="text" name="institution" class="form-control fillByName"> </div>

									<div class="margiv-top-10">
										<button href="javascript:;" class="btn green" type="submit"> Save </button>
									</div>
								</form>
							</div>

						</div>
					</div>

				</div>
			</div>
		</div>


		<script>

				var id = "@request.session.get("id")"

				$(function () {
					EnUpdatePersonInfo.init


				})
		</script>


}
